<template>
    <view>
        <view class="top-tab">
            <view :class="active === 0 ? 'top-tab-item active' : 'top-tab-item'" @click="active=0">全部</view>
            <view :class="active === 1 ? 'top-tab-item active' : 'top-tab-item'" @click="active=1">今日必拼</view>
            <view :class="active === 2 ? 'top-tab-item active' : 'top-tab-item'" @click="active=2">今日上新</view>
        </view>
        <view style="height:94vh">
            <swiper :current="active" class="swiper" @change="swiperChange">
                <block v-for="(item, index) in groupType" :key="index">
                    <swiper-item class="swiper-item">
                        <scroll-view style="height:100%" scroll-y @scrolltolower="scrollHandle">
                            <block v-for="(item1, index1) in allGroupList" :key="index1">
                                <view class="due-item">
                                    <view class="shopping-img">
                                        <img :src="item1.commodity_image_thum" alt="" style="width:100%;height:100%">
                                    </view>
                                    <view class="shopiing-info">
                                        <view class="shopiing-info-line1">
                                            <view class="shopping-info-name">{{item1.spu_name}}</view>
                                            <view class="shopping-info-activity">限时抢购</view>
                                        </view>
                                        <view class="shopiing-info-line2">
                                            <view class="shopping-info-newprice">￥{{item1.activity_price}}</view>
                                            <view class="shopping-info-oldprice">￥{{item1.price}}</view>
                                        </view>
                                        <view class="shopiing-info-line3">
                                            <view class="person-num">{{item1.sales_volume}}人已拼</view>
                                            <view class="group-button" @tap="goGroupBuyingDetail(item1)">去拼团</view>
                                        </view>
                                    </view>
                                </view>
                            </block>
                            <noCommidty :showCommidty="showCommidty"></noCommidty>
                        </scroll-view>
                    </swiper-item>
                </block>
            </swiper>
        </view>
    </view>
</template>

<script>
import { CommidtyModel } from '../../model/commidty'
import noCommidty from '../../components/no-commidty/no-commidty'
const commidtyModel = new CommidtyModel()
export default {
    components: {
        noCommidty
    },
    data() {
        return {
            active: 0,
            groupType: ['全部', '今日必拼', '今日上新'],
            page: 1,
            size: 10,
            allGroupList: [],
            flag: true,
            showCommidty: false
        }
    },
    methods: {
        swiperChange(e) {
            this.allGroupList = []
            this.page = 1
            this.active = e.detail.current;
            this._getAllGroupCommidty()
        },
        goGroupBuyingDetail(item) {
            uni.navigateTo({
                url: '/pagesA/group-commidty-detail/group-commidty-detail?commidtyId=' + item.id
            })
        },
        // 获取拼团区全部商品
        _getAllGroupCommidty() {
            let data = {
                group_buy_type: this.active,
                page: this.page,
                size: this.size
            }
            commidtyModel.getAllGroupCommidty(data).then((res) => {
                if(res.code == 200) {
                    this.allGroupList = this.allGroupList.concat(res.data)
                    res.data.length == 0 ? this.flag = false : this.flag = true
                    if(this.allGroupList.length == 0) {
                        this.showCommidty = true
                    }else {
                        this.showCommidty = false
                    }
                }
            })
        },
        // 滚动分页
        scrollHandle() {
            if(this.flag == true) {
                this.page = this.page + 1
                this._getAllGroupCommidty()
            }
        }
    },
    onLoad() {
        this._getAllGroupCommidty()
    }
}
</script>

<style>
    .top-tab {
        width: 100%;
        height: 85rpx;
        background: #ffffff;
        margin-top: 4rpx;
        display: flex;
        justify-content: space-between;
    }
    .top-tab-item {
        width: 50%;
        color: #333333;
        font-size: 30rpx;
        font-weight: 500;
        text-align: center;
        line-height: 85rpx;
    }
    .active {
        color: #ffffff;
        background: #24C79C;
    }
    .swiper {
        width: 100%;
        height: 100%;
    }
    .swiper-item {
        width: 100%;
        height: 100%;
    }
    .due-item {
        width: 100%;
        height: 313rpx;
        background: #ffffff;
        margin-top: 20rpx;
        overflow: hidden;
        display: flex;
        justify-content: left;
    }
    .shopping-img {
        width: 241rpx;
        height: 241rpx;
        margin-top: 33rpx;
        margin-left: 39rpx;
    }
    .shopiing-info {
        width: 390rpx;
        height: 230rpx;
        margin-top: 47rpx;
        margin-left: 40rpx;
    }
    .shopiing-info-line1 {
        display: flex;
        justify-content: left;
    }
    .shopiing-info-line2 {
        display: flex;
        justify-content: space-between;
        margin-top: 40rpx;
    }
    .shopiing-info-line3 {
        display: flex;
        justify-content: space-between;
        margin-top: 40rpx;
    }
    .shopping-info-name {
        color: #333333;
        font-size: 36rpx;
        font-weight: 500;
    }
    .shopping-info-activity {
        color: #24C79C;
        font-size: 26rpx;
        font-weight: 500;
        margin-left: 42rpx;
        line-height: 50rpx;
    }
    .shopping-info-newprice {
        color: #FF1E1E;
        font-size: 36rpx;
        font-weight: bold;
    }
    .shopping-info-oldprice {
        color: #999999;
        font-size: 26rpx;
        font-weight: 500;
        text-decoration: line-through;
        line-height: 50rpx;
    }
    .shopping-info-unit {
        color: #666666;
        font-size: 28rpx;
        font-weight: 500;
        line-height: 50rpx;
    }
    .person-num {
        color: #999999;
        font-size: 26rpx;
        font-weight: 500;
        line-height: 50rpx;
    }
    .group-button {
        width: 149rpx;
        height: 51rpx;
        background:rgba(36,199,156,1);
        border-radius:26px;
        color: #FFFEFE; 
        font-size: 28rpx;
        text-align: center;
        line-height: 51rpx;
    }
</style>